import React, { useContext, useEffect, useMemo, useState } from 'react';
import Cls from 'classnames';
import { Empty, Table } from 'antd';
import { materialTableColumn } from '../mconfig/MaterialTableColumn';
import { ChangeControllerContext } from '../common/useOAUseContext';
import { IUseOAActionEnum } from '../common/useOAUseReducer';
import { materialTableService } from '../services';

/** 领用OA-- 三、材料列表 */
const DetailInfoMaterialList: React.FC<any> = ({ dataList, openMaterialModalFun, pageTypeOA }) => {
  /** 引入上下文 */
  const { materialList, isEdit, useOADispatch } = useContext(ChangeControllerContext);

  /** 取消选择的材料 */
  const delSelectRow = (record) => {
    const arr = materialList.filter((item) => {
      return item.id !== record.id;
    });
    useOADispatch({
      type: IUseOAActionEnum.SELECT_MATERIAL,
      payload: arr,
    });
  };

  /** 修改材料数量 */
  const changeNum = (id: string | number, value: string | number) => {};

  const isEditMemo = useMemo(() => {
    if (isEdit) {
      return 'edit';
    } else {
      return 'detail';
    }
  }, [isEdit]);

  const columns: Record<string, any>[] = useMemo(() => {
    return materialTableColumn({ pageType: isEditMemo, openMaterialModalFun, queryType: '1', delSelectRow, changeNum, pageTypeOA });
  }, [materialList, isEdit]);

  return (
    <div style={{ width: '100%' }}>
      <div className={Cls('list-table', 'UpdatePackTable')}>
        {isEdit && <Table scroll={{ x: 1200, y: 160 }} bordered size="small" dataSource={materialList} columns={columns} rowKey={'id'} pagination={false} />}
        {!isEdit &&
          (materialList.length > 0 ? (
            <Table scroll={{ x: 1200, y: 160 }} bordered size="small" dataSource={materialList} columns={columns} rowKey={'id'} pagination={false} />
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ))}
      </div>
    </div>
  );
};

export default DetailInfoMaterialList;
